<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        body {
            overflow: hidden;
            background: radial-gradient(#000 16%, transparent 17%), radial-gradient(#444 16%, transparent 17%) 0px 1px, radial-gradient(#000 16%, transparent 17%) 8px 8px, radial-gradient(#444 16%, transparent 17%) 8px 9px;
            background-color: #282828;
            background-size: 16px 16px;
        }
        .card {
            width: 300px;
            height: 400px;
            border: 1px solid rgba(150, 150, 150, 0.2);
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), transparent);
            overflow: hidden;
            position: relative;
            border-radius: 5px;
            margin: 50px auto;
            text-align: center;
            line-height: 400px;
            box-shadow: inset 5px 5px 20px rgba(255, 255, 255, 0.1);
            -webkit-animation: shimmy 6s ease-in-out infinite;
            -webkit-box-shadow: 4px 9px 20px rgba(0, 0, 0, .2), 5px 18px 40px rgba(0, 0, 0, .6);
        }
        p {
            margin-top: 0;
            font-family: Oswald, sans-serif;
            font-size: 30px;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.2);
        }
        @-webkit-keyframes shimmy {
            0%, 100% {
                transform: rotateY(0deg) skewX(0deg);
            }
            50% {
                transform: rotateY(30deg) skewX(1deg);
            }
        }
        .shine {
            width: 1000px;
            height: 100px;
            margin-left: -100px;
            transform: rotate(30deg);
            background: -webkit-linear-gradient(top, transparent, rgba(200, 200, 200, 0.1), transparent);
            position: absolute;
            -webkit-animation: shine 6s ease-in-out infinite;
        }
        @-webkit-keyframes shine {
            0%, 100% {
                margin-top: -100px;
            }
            50% {
                margin-top: 800px;
            }
        }
        .shadow {
            width: 275px;
            height: 5px;
            margin: -15px auto 0 auto;
            -webkit-animation: angle 6s ease-in-out infinite;
        }
        @-webkit-keyframes angle {
            0%, 100% {
                height: 5px;
            }
            50% {
                height: 15px;
                width: 260px;
                border-radius: 30% 90% 90% 30%;
                transform: skew(50deg, -10deg) translateX(13px);
            }
        }
    </style>
</head>
<body>
<div class='contain'>
    <div class='card'>
        <div class='shine'></div>
        <p>tech'brood</p>
    </div>
</div>
</body>
</html>